import React,{ Component } from 'react'

import {
    FootWearContainer,
    FootWearUl,
    FootWearLi,
    FootWearWrapper
}from './FootWearStyle'

import actionCreators from 'store/tuan-wys/footwear/actionCreators'

import getShoes from 'utils/tuan-wys/getshoes'

import BScroll from 'better-scroll'

const Item = ( props ) => {
    return (
        <FootWearLi>
              <div className="shopMessage">
                    <img src=  {props.image} alt=""  className="img"/>
                    <div className="discuss"> {props.buyer_number_text} </div>
                </div>
                <div className="shopRecommend">
                    <span className="goods-num">{props.group_name_tag}</span>
                    {props.short_name}
                </div>
                <div className="good-foot">
                    <div className="price">
                        <span className="ct-price">
                            { props.jumei_price}
                        </span>
                        <span className="jm-price">
                            { props.single_price}
                        </span>
                    </div>
                    <div className="time-right">
                        去开团
                    </div>
                </div>
        </FootWearLi>
    )
}

class FootWear extends Component{

    componentDidMount() {
        this.props.getShoes()
        this.scroll = new BScroll( this.box,{
            mouseWheel: {
                speed: 5,
                invert: false,
                easeTime: 300
               },
               pullUpLoad: {
                threshold: 50 //开启上拉事件
            },
               click: true,
        })
    }
    renderItem = () => {
        return this.props.shoes && 
        this.props.shoes.data.map( item => <Item 
        { ...item } key = { item.item_id }
        />)
    }

    render () {
        return (
        <FootWearContainer ref ={ el => this.box = el}>
            <FootWearUl>
                { this.renderItem()}
            </FootWearUl>
        </FootWearContainer>
        )
    }
    componentDidUpdate(){
        console.log(this.props.shoes)
    }
}



export default getShoes({
    actionCreators,
    UIComponent:FootWear,
    type:'footwear'
})